<template>
  <div style="background-color:antiquewhite;height: 2000px">
    <!-- 头部 -->
    <div
      style="
        display: flex;
        height: 70px;
        line-height: 70px;
        border-bottom: 1px solid #ccc;
      "
    >
      <div style="width: 335px; text-align: center; background-color:antiquewhite">
        <!-- <img src="../../assets/favicon.png" style="width: 40px; height: 40px; position: relative; top: 9px;" /> -->
        <span style="font-size: 28px;color: blueviolet; font-style:italic; font-weight:800">欢迎来到幸福花店</span>
      </div>
      <div style="flex: 1;">
        <!-- 导航菜单 -->
        <!-- <ul>
                    <li class="item"><a href="/">菜单1</a></li>
                    <li class="item"><a href="/">菜单2</a></li>
                    <li class="item"><a href="/">菜单3</a></li>
                    <li class="item"><a href="/">菜单4</a></li>
                </ul> -->
        <el-menu
          :default-active="1"
          class="el-menu-demo"
          mode="horizontal"
          background-color="antiquewhite"
          text-color="#FF5511"
          active-text-color="brown"
          router
        >
          <el-menu-item index="/front/home"><span style="font-size: 25px">首页</span></el-menu-item>
          <el-menu-item index="/front/popular"><span style="font-size: 25px">热销鲜花</span></el-menu-item>
          <el-menu-item index="/front/activity"><span style="font-size: 25px">活动公告</span></el-menu-item>
          <el-menu-item index="/front/cart"><span style="font-size: 25px">我的购物车</span></el-menu-item>
          <el-menu-item index="/front/orders"><span style="font-size: 25px">我的订单</span></el-menu-item>
          <!-- <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu> -->
          
        </el-menu>
      </div>
      <div style="width: 200px; background-color: antiquewhite;">
        <div v-if="!user.username" style="text-align: right; padding-right: 39px">
          <el-button @click="$router.push('/login')">登录</el-button>
          <el-button @click="$router.push('/register')">注册</el-button>
        </div>
        <div v-else>
          <el-dropdown style="width: 100px; cursor: pointer;margin-left:40px; font-size:medium">
            <div style="display: inline-block">
              <img
                :src="user.avatarUrl"
                alt=""
                style="
                  width: 30px;
                  border-radius: 50%;
                  position: relative;
                  top: 10px;
                  right: 5px;
                "
              />
              <span style="font-size: 16px;color:darkblue">{{ user.name }}</span>
              <i class="el-icon-arrow-down" style="margin-left: 5px"></i>
            </div>
            <el-dropdown-menu
              slot="dropdown"
              style="width: 100px; text-align: center; background-color:lightpink">
              <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                <router-link to="/front/information">个人信息</router-link>
              </el-dropdown-item>
              <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                <span style="text-decoration: none" @click="logout">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    
    <div style="width: 1100px; margin: 0 auto;">
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
export default {
  name: "Front",

  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : []
    };
  },

  methods: {
    logout() {
      this.$router.push("/login");
      localStorage.removeItem("user");
      this.$notify.success("退出登录成功!");
    },
  },
};
</script>

<style>
.item {
  display: inline-block;
  width: 100px;
  text-align: center;
  cursor: pointer;
}
.item a {
  color: rgb(48, 127, 101);
  text-decoration: none;
}
.item:hover {
  background-color: burlywood;
  color: antiquewhite;
}
.el-menu-demo{
  color:rgb(124, 39, 167);
  margin-left: 50px
}
.aa{
  color:brown;
}
</style>